<template>
    <div>
        <!-- 搜索卡片 -->
        <el-card>
            <el-form :model="queryForm" :inline="true">
                <el-form-item label="课程名称">
                    <el-input type="text" placeholder="请输入任务名称" v-model="queryForm.courseName" size="small"></el-input>
                </el-form-item>
                <el-form-item label="任课教师">
                    <el-input type="text" placeholder="请输入任务名称" v-model="queryForm.teacherName" size="small"></el-input>
                </el-form-item>
                <el-form-item label="学生姓名">
                    <el-input type="text" placeholder="请输入任务名称" v-model="queryForm.studentName" size="small"></el-input>
                </el-form-item>
                <el-form-item label="学生专业班级">
                    <el-input type="text" placeholder="请输入任务名称" v-model="queryForm.studentMajor" size="small"></el-input>
                </el-form-item>
                <el-form-item label="考勤状态">
                    <el-select v-model="queryForm.status" size="small">
                        <el-option value="出勤" label="出勤"></el-option>
                        <el-option value="缺勤" label="缺勤"></el-option>
                        <el-option value="请假" label="请假"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
                    <el-button size="small" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 数据卡片 -->
        <el-card class="mt12" style="margin-top: 10px">
            <!-- 数据表格 -->
            <el-table
            :data="attendanceList"
            v-loading="loading"
            border
            fit
            :header-cell-style="{background:'#f8f8f9',color:'#5a516e',padding:'10px 0px'}"
            :cell-style="{padding:'5px 0px'}"
            @selection-change="handleSelectionChange"
            style="margin: 10px 0">
                <el-table-column label="课程名称" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.courseName }}
                    </template>
                </el-table-column>
                <el-table-column label="教师工号" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.teacherNum }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="任课教师" align="center" width="120">
                    <template slot-scope="scope">
                        <span>{{ scope.row.teacherName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="学生工号" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.studentNum }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="学生姓名" align="center" width="120">
                    <template slot-scope="scope">
                        <span>{{ scope.row.studentName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="学生专业班级" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.studentMajor }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="上课时间" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.courseTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="考勤时间" align="center">
                    <template slot-scope="scope">
                        <span>{{ formatDate(scope.row.aTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="考勤状态" align="center" width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status === '出勤'" type="success">出勤</el-tag>
                        <el-tag v-if="scope.row.status === '请假'" type="warning">请假</el-tag>
                        <el-tag v-if="scope.row.status === '缺勤'" type="danger">缺勤</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                    :current-page="queryForm.pageNum" 
                    :page-size="queryForm.pageSize"
                    :total="total"
                    :page-sizes="[10,20,50,100]"
                    layout="total,sizes,prev,pager,next"
                    @current-change='handleCurrentChange'
                    @size-change='handleSizeChange'>
                </el-pagination>
        </el-card>

    </div>
</template>

<script>
    import { listAttendances } from '@/api/attendance'
    import { parseTime } from '@/utils/date'
    export default {
        name: 'Attendance',
        data() {
            return {
                loading: true,
                show: false,
                total: 120,
                queryForm: {
                    pageNum: 1,
                    pageSize: 10
                },
                attendanceList: []
            }
        },
        created() {
            this.getList()
        },
        methods: {
            handleReset() {
                this.queryForm = {
                    pageNum: 1,
                    pageSize: 10
                }
                this.getList()
            },
            handleSearch() {
                this.queryForm.pageNum = 1
                this.getList()
            },
            handleSizeChange(pageSize) {
                this.queryForm.pageSize = pageSize
                this.queryForm.pageNum = 1
                this.getList()
            },
            handleCurrentChange(pageNum) {
                this.queryForm.pageNum = pageNum
                this.getList()
            },
            getList() {
                this.loading = true
                listAttendances(this.queryForm).then(res => {
                    this.attendanceList = res.data.records
                    this.total = res.data.total
                    this.loading = false
                }).catch(err => {})
            },
            handleDelete(ids) {
                this.$confirm("你确定删除id为" + ids + "的记录吗？", "提示", {
                    cancelButtonText: "取消",
                    confirmButtonText: "确定",
                    type: "warning"
                }).then(() => {
                    deleteAttendance(ids).then(res => {
                        this.$message("删除成功")
                        this.getList()
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {})
            },
            handleBatchDelete() {
                if (this.selectList) {
                    let ids = this.selectList.map(o => { return o.id })
                    this.handleDelete(ids)
                }
            },
            handleSelectionChange(val) {
                this.selectList = val;
            },
            formatDate(value, format) {
                return parseTime(new Date(value), format)
            }
        }
    }
</script>

<style scoped>
    .el-form-item {
        margin: 10px;
    }
</style>